<template>
  <div class="scroll-wrapper" ref="wrapper">
    <div class="scroll-content">
      <detail-swiper :picDatas="detailData.pics"></detail-swiper>
      <div v-if="!errorShow">
        <detail-food 
          v-if="field === 'food'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :recom="detailData.recom"
          :commentKeyword="detailData.comment_keyword"
        ></detail-food>

        <detail-view
          v-if="field === 'view'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :tip="detailData.tip"
          :intro="detailData.intro"
          :ticketInfo="detailData.ticket_info"
        ></detail-view>

        <detail-hotel
          v-if="field === 'hotel'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :service="detailData.service"
        ></detail-hotel>

        <detail-massage
          v-if="field === 'massage'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :openDateTime="detailData.open_datetime"
          :commentKeyword="detailData.comment_keyword"
          :service="detailData.service"
        ></detail-massage>
        
        <detail-ktv
          v-if="field === 'ktv'"
          :name="detailData.name"
          :starNum="Number(detailData.star)"
          :score="detailData.score"
          :address="detailData.address"
          :price="Number(detailData.default_price)"
          :service="detailData.service"
        ></detail-ktv>
      </div>
      <error :errorShow="errorShow"></error>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll';
import DetailSwiper from './Sub/Swiper';
import DetailFood from './Detail/Food';
import DetailView from './Detail/View';
import DetailHotel from './Detail/Hotel';
import DetailMassage from './Detail/Massage';
import DetailKtv from './Detail/Ktv';
import Error from './Sub/Error'

import { DetailModel } from 'models/detail';
import tools from 'utils/tools'

export default {
  name: 'DetailScrollWrapper',
  components: {
    DetailSwiper,
    DetailFood,
    DetailView,
    DetailHotel,
    DetailMassage,
    DetailKtv,
    Error
  },
  data () {
    return {
      field: '',
      id: '',
      detailData: {},
      errorShow: false
    }
  },
  mounted () {
    this.field = this.$route.query.field;
    this.id = this.$route.query.id;
    this.scroll = new BetterScroll(this.$refs.wrapper);
    this.getDetail(this.field, this.id);
  },
  activated () {    
    this.currentField = this.$route.query.field;
    this.currentId = this.$route.query.id;

    if(this.currentField  !== this.field || this.currentId !== this.currentId) {
      this.field = this.currentField;
      this.id = this.currentId;
      this.getDetail(this.currentField, this.id)
    }
  },
  methods: {
    getDetail (field, id) {
      const detailModel = new DetailModel();
      detailModel.getDetail(field, id).then(res => {

        if (res && res.status === 0 && res.data) {
          this.errorShow = false

          const data = res.data
          data.pics && (data.pics = tools.jsonToArr(data.pics));
          data.recom && (data.recom = tools.replaceToSpace(data.recom));
          data.comment_keyword && (data.comment_keyword = tools.strToArr(data.comment_keyword));
          data.service && (data.service = tools.jsonToArr(data.service))

          this.detailData = data;
        } else {
          this.errorShow = true
        }
      })
    }
  }
}
</script>

<style scoped>

</style>